<template>
    <div>
        <a-button-group v-if="Object.keys(mediaObj).length === 0">
            <a-button @click="showSelector=true">
                <a-icon type="calendar"/>
                在素材库内选择图片
            </a-button>
            <a-upload
                    name="file"
                    :showUploadList="false"
                    :before-upload="beforeUpload"
                    @change="uploadHander"
                    :customRequest="customRequest"
            > <a-button><a-icon type="upload"/>上传新图片</a-button>
            </a-upload>
        </a-button-group>
        <a-card v-else :hoverable="true">
            <div slot="cover"
                 :title="mediaObj.mediaName"
                 :style="{backgroundImage: 'url('+mediaObj.mediaUrl+')', height:'200px'}"
                 class="MaterialimgBox">
            </div>
            <a-row>
                <a-col :span="22" class="text-ellipsis" :title="mediaObj.mediaName">
                    {{mediaObj.mediaName}}
                </a-col>
                <a-col :span="2">
                    <a-button shape="circle" icon="delete" size="small"
                              @click="onRemove"
                    />
                </a-col>
            </a-row>
        </a-card>
        <ImageSelector v-if="showSelector" @closeModal="closeModal"/>
    </div>
</template>
<script>
    import {addFileMaterial} from "../../public/http";
    export default {
        props: ['dataSource'],
        components: {
            ImageSelector: () => import('../../component/material/ImageSelector')
        },
        data() {
            return {
                mediaType:'image',
                showSelector: false,
                mediaObj: {},
            }
        },
        methods: {
            closeModal(e) {
                this.showSelector=false;
                if (e.render) {
                    this.mediaObj = e.data;
                    //更新父组件
                    this.$emit('callBack', this.mediaObj );
                }
            },
            onRemove() {this.mediaObj = {};},
            customRequest(data) {
                this.upLoading = true;
                const formData = new FormData();
                formData.append('file', data.file);
                formData.append("mediaType", this.mediaType);
                addFileMaterial(formData).then((res) => {
                    this.$exMod.ajaxMessage(res);
                    this.upLoading = false;
                    if(res.code===0){
                        this.mediaObj=res.data.result;
                        this.$emit('callBack', this.mediaObj );
                    }
                })
            },
            beforeUpload(file) {
                const allowTye = ['bmp', 'png', 'jpeg', 'jpg', 'gif'];
                const fileType = file.type.split("/");
                const chekType = allowTye.findIndex((value, index, arr) => {
                    return value === fileType[1]
                });
                if (chekType < 0) {
                    this.$notification['error']({
                        message: '图片素材添加失败',
                        description: '图片素材只允许上传bmp,png、jpeg、jpg、gif格式的图片'
                    });
                    return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$notification['error']({message: '图片素材添加失败', description: "图片素材的大小不能超过 2MB!"});
                    return false;
                }
                return true
            },
            uploadHander(info) {
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
        },
        created() {
            this.mediaObj = this.dataSource;
        }
    }
</script>
<style scoped>
</style>
